<!--个人中心页面-->
<template>
  <div class="profile">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>个人信息</span>
      </div>
      <el-upload
          class="avatar-uploader"
          :action="url"
          :show-file-list="false"
          :on-success="handleAvatarSuccess">
        <img v-if="imageUrl" :src="imageUrl" id="user-avatar">
        <img v-if="!imageUrl" src="~assets/images/avatar.gif" id="user-avatar">
        <!--                <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
      </el-upload>
      <!--      <img id="user-avatar" src="~assets/images/avatar.gif" alt=""/>-->
      <el-divider class="horizontal"></el-divider>

      <div v-model="personalInformation">
        <div class="text">
          <i class="el-icon-user-solid"></i>
          {{ '用户名称 ' }}
        </div>
        <div class="item">
          {{ personalInformation.userName }}
        </div>
      </div>
      <el-divider class="horizontal"></el-divider>

      <div v-model="personalInformation">
        <div class="text">
          <i class="el-icon-phone"></i>
          {{ '手机号码 ' }}
        </div>
        <div class="item">
          {{ personalInformation.phonenumber }}
        </div>
      </div>
      <el-divider class="horizontal"></el-divider>
      <div v-model="personalInformation">
        <div class="text">
          <i class="el-icon-message"></i>
          {{ '用户邮箱 ' }}
        </div>
        <div class="item">
          {{ personalInformation.email }}
        </div>
      </div>
      <el-divider class="horizontal"></el-divider>
      <div v-model="personalInformation">
        <div class="text">
          <i class="el-icon-s-grid"></i>
          {{ '所属部门 ' }}
        </div>
        <div class="item">
          {{ personalInformation.deptNames + '/' + personalInformation.postNames }}
        </div>
      </div>
      <el-divider class="horizontal"></el-divider>
      <div v-model="personalInformation">
        <div class="text">
          <i class="el-icon-s-custom"></i>
          {{ '所属角色 ' }}
        </div>
        <div class="item">
          {{ personalInformation.roleNames }}
        </div>
      </div>
      <el-divider class="horizontal"></el-divider>
      <div v-model="personalInformation">
        <div class="text">
          <i class="el-icon-date"></i>
          {{ '创建日期 ' }}
        </div>
        <div class="item">
          {{ personalInformation.createTime }}
        </div>
      </div>
      <el-divider class="horizontal"></el-divider>
    </el-card>
    <el-card shadow="always" class="profile-card">
      <div slot="header" class="profile-header">
        <div class="profile-name">更新信息</div>
      </div>
      <div class="profile-body">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="个人资料">
            <el-form :model="personalInformationFormData" :rules="rules" ref="form" label-width="100px">
              <el-input v-model="personalInformationFormData.userId" type="hidden"></el-input>
              <el-form-item label="用户昵称" prop="nickName">
                <el-input v-model="personalInformationFormData.nickName"></el-input>
              </el-form-item>

              <el-form-item label="手机号码" prop="phonenumber">
                <el-input v-model="personalInformationFormData.phonenumber"></el-input>
              </el-form-item>

              <el-form-item label="邮箱" prop="email">
                <el-input v-model="personalInformationFormData.email"></el-input>
              </el-form-item>

              <el-form-item label="性别" prop="sex">
                <el-radio v-model="personalInformationFormData.sex" label="0">男</el-radio>
                <el-radio v-model="personalInformationFormData.sex" label="1">女</el-radio>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm('form')">保存</el-button>
                <el-button type="danger" @click="">取消</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="更改密码">
            <el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="100px">
              <el-form-item label="旧密码" prop="oldPassword">
                <el-input type="password" v-model="passwordForm.oldPassword"></el-input>
              </el-form-item>
              <el-form-item label="新密码" prop="newPassword">
                <el-input type="password" v-model="passwordForm.newPassword"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="confirmPassword">
                <el-input type="password" v-model="passwordForm.confirmPassword"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="updatePassword('passwordForm')">保存</el-button>
                <el-button type="danger" @click="">取消</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      //图片上传地址
      url: "",
      //图片存储地址
      imageUrl: '',
      //用户个人信息
      personalInformation: "",
      activeTab: '0',
      personalInformationFormData: {
        id: null,
        nickName: '',
        phonenumber: '',
        email: '',
        sex: ''
      },
      rules: {
        nickName: [
          {required: true, message: '请输入昵称', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
        ],
        phonenumber: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: ['blur', 'change']}
        ]
      },
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },

      passwordRules: {
        oldPassword: [
          {required: true, message: '请输入旧密码', trigger: 'blur'},
          // {validator: this.checkOldPassword, trigger: 'blur'}
        ],
        newPassword: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
          {min: 6, max: 20, message: '密码长度在6到20个字符之间', trigger: 'blur'}
        ],
        confirmPassword: [
          {required: true, message: '请确认密码', trigger: 'blur'},
          {validator: this.validateConfirmPassword, trigger: 'blur'}
        ]
      },
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      location.reload()
    },

    findPersonalInformation() {
      this.username = localStorage.getItem("username");
      this.$axios.get("/sysUser/personalInformation/" + this.username)
          .then(result => {
            console.log(result.data.data)
            if (result.data.code == 200) {
              this.personalInformation = result.data.data;
              this.personalInformationFormData = result.data.data;
              this.imageUrl = this.personalInformation.avatar;
            } else {
              return this.$message.error({
                message: result.data.message,
                duration: 2000,
              });
            }
          })
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios.put("/sysUser/updatePersonalInformation/", this.personalInformationFormData)
              .then(result => {
                console.log(result.data.data)
                if (result.data.code == 200) {
                  this.$message.success('保存成功')
                } else {
                  return this.$message.error({
                    message: '保存失败' + result.data.message,
                    duration: 2000,
                  });
                }
              })
        }
      })
    },
    updatePassword(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.personalInformationFormData.password = this.passwordForm.newPassword;
          const oldPassword = this.passwordForm.oldPassword;
          const newPassword = this.passwordForm.newPassword;
          this.$axios.put("/sysUser/updatePassword/?oldPassword=" + oldPassword + "&newPassword=" + newPassword, this.personalInformationFormData)
              .then(result => {
                console.log(result.data.data)
                if (result.data.code == 200) {
                  this.$message.success('修改成功')
                } else {
                  return this.$message.error({
                    message: '修改失败' + result.data.message,
                    duration: 2000,
                  });
                }
              })
        }
      })
    },
    validateConfirmPassword(rule, value, callback) {
      if (value !== this.passwordForm.newPassword) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    },

  },
  mounted() {//页面加载时自动调用

    // let accessToken = localStorage.getItem("access-token");
    // let refreshToken = localStorage.getItem("refresh-token");
    // // console.log("accessToken=" + accessToken);
    // // console.log("refreshToken=" + refreshToken);
    // //携带token访问
    // this.$axios.defaults.headers.common['Authorization'] = accessToken;
    // this.$axios.defaults.headers.common['RefreshToken'] = refreshToken;
    this.findPersonalInformation();
    this.username = localStorage.getItem("username");
    this.url = "http://localhost:8080/upload/" + this.username;
  }
}
</script>
<style scoped>
img {
  border-style: none;
  overflow-clip-margin: content-box;
  overflow: clip;
}

.text {
  font-size: 15px;
  float: left;
}

.item {
//margin-bottom: -59px; float: right;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  float: left;
  width: 380px;
  height: 670px;
}

.profile {
//display: flex; //justify-content: center; //align-items: center;
}

.profile-card {
  float: right;
  width: 830px;
  height: 500px;
}

.profile-header {
  display: flex;
//justify-content: center; //align-items: center; margin-bottom: 10px; height: 10px;
}

.profile-name {
//margin-top: 10px; font-size: 20px;

}

.profile-body {
  padding: 20px;
}

#user-avatar {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto;

}

.horizontal {
  float: right;
  display: block;
}

.avatar-uploader {
  text-align: center;
}

</style>
